<template>
	<custom-navigation-bar background='linear-gradient(135deg, #faed00 0%, #fdb218 25%, #d63d2d 60%, #64024d 100%);'
		class="nav-bar" title="日历" color='#FFF' :back="false"></custom-navigation-bar>
	<view class="calendar">
		<swiper :current='current' >
		<!-- 	<swiper-item>
				<view class="">
					<view class="">
						{{currentMonth - 1}}月
					</view>
					<view class="flex-row justify-between">
						<view class="days" v-for="(v,k) in weekList">
							{{v}}
						</view>
					</view>
					<view class="flex-row justify-between flex-wrap">
						<view class="days" v-for="(v,k) in daysData">
							{{v.day}}
						</view>
					</view>
				</view>
			</swiper-item> -->
			<swiper-item v-for="(item,index) in 3">
				<view class="">
					<view class="">
						{{currentMonth}}月
					</view>
					<view class="flex-row justify-between">
						<view class="days" v-for="(v,k) in weekList">
							{{v}}
						</view>
					</view>
					<view class="flex-row justify-between flex-wrap">
						<template v-if="daysData.days[0].weekday !== '1'">
							<view class="days" v-for="(v,k) in (daysData.days[0].weekday - 1)">
							</view>
						</template>

						<view class="days" v-for="(v,k) in daysData.days">
							{{v.day}}
						</view>
						<template >
							<view class="days" v-for="(v,k) in (7 - daysData.days[daysData.days.length - 1].weekday)">
							</view>
						</template>
					</view>
				</view>
			</swiper-item>
		
		</swiper>
	</view>
</template>

<script>
	const now = new Date();
	const year = now.getFullYear();
	const currentMonth = now.getMonth() + 1; // 加 1 是因为月份从 0 开始
	export default {
		data() {
			return {
				current:1,
				currentMonth,
				weekList: ['一', '二', '三', '四', '五', '六', '日'],
				daysData: [],
				qdaysData: [],
				hdaysData: [],
			}
		},
		created() {
			this.daysData = this.getMonthDaysAndWeekdays(currentMonth)
			if(currentMonth==1){
				this.qdaysData = this.getMonthDaysAndWeekdays(12,year - 1)
				this.hdaysData = this.getMonthDaysAndWeekdays(currentMonth + 1)
			}else if(currentMonth==12){
				this.qdaysData = this.getMonthDaysAndWeekdays(currentMonth - 1)
				this.hdaysData = this.getMonthDaysAndWeekdays(1,year + 1)
			}else{
				this.qdaysData = this.getMonthDaysAndWeekdays(currentMonth - 1)
				this.hdaysData = this.getMonthDaysAndWeekdays(currentMonth + 1)
			}
			
			console.log('year,daysCount,days', this.daysData);

		},
		methods: {
			getMonthDaysAndWeekdays(month, year = new Date().getFullYear()) {
				// 验证月份是否有效（1-12）
				if (month < 1 || month > 12) {
					throw new Error("月份必须是1到12之间的数字");
				}

				// 获取当月的天数
				const daysInMonth = new Date(year, month, 0).getDate();

				// 星期几的中文名称映射（0是星期日，6是星期六）
				const weekdays = [7, 1, 2, 3, 4, 5, 6];

				// 存储每天的信息
				const daysInfo = [];

				// 遍历当月的每一天
				for (let day = 1; day <= daysInMonth; day++) {
					// 创建日期对象
					const date = new Date(year, month - 1, day);
					// 获取星期几（0-6）
					const dayOfWeek = date.getDay();

					daysInfo.push({
						day: day,
						weekday: weekdays[dayOfWeek],
						weekdayNumber: dayOfWeek // 0表示星期日，6表示星期六
					});
				}

				return {
					year: year,
					month: month,
					daysCount: daysInMonth,
					days: daysInfo
				};
			}

			// 使用示例：
			// try {
			// 	// 获取当前月份的信息
			// 	const currentMonth = new Date().getMonth() + 1;
			// 	const monthData = getMonthDaysAndWeekdays(currentMonth);

			// 	console.log(`${monthData.year}年${monthData.month}月有${monthData.daysCount}天`);
			// 	console.log("每天对应的星期：");
			// 	monthData.days.forEach(day => {
			// 		console.log(`${day.day}日 星期${day.weekday}`);
			// 	});
			// } catch (error) {
			// 	console.error(error.message);
			// }

		}
	}
</script>

<style lang="scss" scoped>
	.calendar {}

	.days {
		width: calc((100vw - 30px) / 7);
		text-align: center;
	}
</style>